<template>
	<div class="ele-body">
		<div class="oldtop">
			<div>
				<el-date-picker style="margin-left: 12px;min-width: 220px;" v-model="oldseach_time" format="yyyy-MM-dd"
					value-format="yyyy-MM-dd" type="daterange" align="right" unlink-panels range-separator="至"
					start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
				</el-date-picker>
			</div>
			<div>
				<el-button style="margin-left: 12px;" type="primary" icon="el-icon-search" @click="oldchaxun()">查询
				</el-button>
			</div>
		</div>
		<div style="margin-top: 18px;">
			<el-table :data="historyList" stripe style="width: 100%">
				<el-table-column label="序号" type="index" width="50">
				</el-table-column>
				<el-table-column prop="name" label="名称" min-width="120">
				</el-table-column>
				<el-table-column prop="money" label="金额" min-width="120">
				</el-table-column>
				<el-table-column prop="createtime" :formatter="formatDate" label="时间" min-width="120">
				</el-table-column>
			</el-table>
		</div>
		<div class="block" style="margin-top: 18px;">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChangeold"
				:current-page="oldpage" :page-sizes="[10]" :page-size="10"
				layout="total, sizes, prev, pager, next, jumper" :total="oldtotal">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	export default {
		name:'Kslist',
		props:['oldtime','dangqiankey'],
		data() {
			return {
				historyList: [],
				oldpage: 1,
				oldtotal: 0,
				oldseach_time: '',
				seach_key:'',
				pickerOptions: {
          disabledDate: time => {
              // 禁用今天之后的日期【当前天可选】
              return time.getTime() > Date.now() + 86400000 - 5;
          },
					shortcuts: [{
						text: '最近一周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						}
					}]
				},
			};
		},
		watch:{
			oldtime(newval,oldval){
				console.log(newval,oldval)
				this.oldseach_time=newval;
				this.gethistoryList();
			},
			dangqiankey(newval,oldval){
				console.log(newval,oldval)
				this.seach_key=newval;
				this.gethistoryList();
			}
		},
		mounted() {
			this.oldseach_time=this.oldtime;
			this.seach_key=this.dangqiankey;
			this.gethistoryList();
		},
		methods: {
			//格式化时间
			formatDate(row, column) {
				let data = row[column.property]
				if (data == null) {
					return null
				}
				let dt = new Date(data * 1000)
				let Month = dt.getMonth() + 1 < 10 ? '0' + (dt.getMonth() + 1) : dt.getMonth() + 1;
				let Day = dt.getDate() < 10 ? '0' + (dt.getDate()) : dt.getDate();
				let Hours = dt.getHours() < 10 ? '0' + (dt.getHours()) : dt.getHours();
				let Minutes = dt.getMinutes() < 10 ? '0' + (dt.getMinutes()) : dt.getMinutes();
				let Seconds = dt.getSeconds() < 10 ? '0' + (dt.getSeconds()) : dt.getSeconds();
				return dt.getFullYear() + '-' + Month + '-' + Day + ' ' + Hours + ':' + Minutes + ':' + Seconds
			},
			// 历史查询
			oldchaxun() {
				this.oldpage = 1;
				this.gethistoryList();
			},
			//获取历史列表
			gethistoryList() {
				this.$http.get('/back/finance/finance/getDepDetail?page=' + this.oldpage + '&size=10' + "&type=room"+ "&key=" + this.seach_key+ "&seach_time=" + this.oldseach_time).then(res => {
					if (res.data.code === 1) {
						this.historyList = res.data.data.data;
						this.oldtotal = res.data.data.total;
					} else {
						this.$message.error(res.data.msg || '获取数据失败');
					}
				})
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChangeold(val) {
				console.log(`当前页: ${val}`);
				this.oldpage = val;
				this.gethistoryList();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.oldtop {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>
